<template>
	<view class='container bg-w'>
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="请假管理">
				<template slot='left'>
					<view class="flex width-100">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="container_main">
			<view class="buildList" v-if="notClockLists.length > 0">
				<uni-list>
				    <uni-list-item v-for="(item,index) in notClockLists" :key="index">
						<template slot='body'>
							<view class="buildList-body">
								<view class="color-6 flex algin-i-c">
									<view claas="lists_label">姓&nbsp;&nbsp;&nbsp;名：</view>
									<text class="wid-80 txtCut1">{{item.username}}({{item.clockStatus?item.clockStatus=='1'?'请假':'补卡':"暂无类别"}})</text>
								</view>
								<view class="color-6 flex algin-i-c">
									<view claas="lists_label">时&nbsp;&nbsp;&nbsp;间：</view>
									<text class="wid-80 txtCut1">{{ item.createTime}}</text>
									</view>
								<view class="color-6 flex algin-i-c">
									<view claas="lists_label">事&nbsp;&nbsp;&nbsp;由：</view>
									<text class="wid-80 txtCut1">{{ item.reason || '无'}}</text>
								</view>
								<view class="deal_btn flex" v-if="item.status == '0 '">
									<button style="color: #ccc;" @click="agreeRefuseApplicate(false, item.attendanceId)" >{{refuseBtn}}</button>
									<button style="color: #1AAD19;" @click="agreeRefuseApplicate(true, item.attendanceId)">{{agreeBtn}}</button>
								</view>
								<view class="deal_btn flex" v-else-if="item.status == '-1'">
									<button style="color: #ccc;">已驳回</button>
								</view>
								<view class="deal_btn flex" v-else="item.status == '1'">
									<button style="color: #1AAD19;">已同意</button>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<view class="load-more-btn" @click="loadmore">
					查看更多数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAllnotClockPeople, putAgreeOrRefuse } from "@/common/api/attenApi.js"
	export default {
		data() {
			return {
				notClockLists: [],
				refuseBtn: "拒绝",
				agreeBtn: "同意",
				params:{
					pageNo: 1,
					pageSize: 10
				},
				scrollParams:{
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		mounted(){
			this.getAllnotClockPeoples(this.params);
		},
		methods: {
			loadmore(){
				this.scrollParams.pageNo++
				this.getAllnotClockPeoples(this.scrollParams)
			},
			/**
			 * 获取考勤记录人员列表
			 * @method getAllnotClockPeoples
			 */
			getAllnotClockPeoples(data) {
				let _this = this
				getAllnotClockPeople(data).then(res=>{
					if(res.code === "20000" && res.data.records.length > 0){
						if(data.pageNo > 1){
							_this.notClockLists.push(...res.data.records)
						}else{
							_this.notClockLists = res.data.records
						}
					}else{
						uni.showToast({ icon:'none', title:'暂无更多数据', duration: 1500 });
						this.scrollParams.pageNo = 0
					}
				})
			},
			agreeRefuseApplicate(status, id) {
				let _this = this
				putAgreeOrRefuse({
					isAgree: status,
					attendanceId: id
				}).then(res=>{
					if(res.code === "20000"){
						this.getAllnotClockPeoples(_this.params)
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container_main{
	position: relative;
	top: 70px;
	overflow-y: scroll;
	background-color: #eee;
	.buildList-body{
		position: relative;
		width: 100%;
		padding: 0 5px;
		border-top: 1px solid #ccc;
		border-bottom: 3px solid #ccc;
		border-radius: 7px;
		.deal_btn{
			position: absolute;
			width: 25%;
			top: 25%;
			right: 0;
			uni-button{
				font-size: 14px;
				padding: 0;
				background-color: #fff;
				&::after{
					border: none;
				}
			}
			
		}
	}
}
.replace_btn{
	color: #09AAE9;
}
.load-more-btn{
	height:50px;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	background-color: #09AAE9;
	color: #fff;
}
</style>
